<template>
  <div class="confirm-box">
    <el-dialog :title="dialogTitle" v-model="dialogFormVisible" :draggable="true" top="40px" width="80%">
      <div class="my-table-box">
        <el-table :height="tableHeight" :header-cell-style="{background:'#d6dee5',color:'#000000',fontSize:'14px'}"
          :cell-style="{fontSize:'12px',color:'#7b7b7d'}" :data="tableData" stripe>
          <el-table-column type="index" width="80" label="序号" align="center" />
          <el-table-column label="用户姓名" align="center">
            <template v-slot="scope">
              {{ scope.row.name|| '--' }}
            </template>
          </el-table-column>
          <el-table-column label="手机号码" align="center">
            <template v-slot="scope">
              {{ scope.row.phone|| '--' }}
            </template>
          </el-table-column>
          <el-table-column label="用户类型" align="center">
            <template v-slot="scope">
              {{ userType[scope.row.userType]	|| '--' }}
            </template>
          </el-table-column>
          <el-table-column label="用户状态" align="center">
            <template v-slot="scope">
              {{ scope.row.state == 1? '正常': '禁用'	|| '--' }}
            </template>
          </el-table-column>
          <el-table-column label="佣金总额" align="center">
            <template v-slot="scope">
              {{ scope.row.incomeTotal|| '--' }}
            </template>
          </el-table-column>
          <el-table-column label="已冻结" align="center">
            <template v-slot="scope">
              {{ scope.row.incomeFreezen|| '--' }}
            </template>
          </el-table-column>
          <el-table-column label="可提现" align="center">
            <template v-slot="scope">
              {{ scope.row.incomeRestAvailable	|| '--' }}
            </template>
          </el-table-column>
          <el-table-column label="已申请" align="center">
            <template v-slot="scope">
              {{ scope.row.incomeWithdrawWait|| '--' }}
            </template>
          </el-table-column>
          <el-table-column label="已提现" align="center">
            <template v-slot="scope">
              {{ scope.row.incomeWithdrawUsed	|| '--' }}
            </template>
          </el-table-column>
          <el-table-column label="佣金余额" align="center">
            <template v-slot="scope">
              {{ scope.row.incomeRestAvailable|| '--' }}
            </template>
          </el-table-column>
          <el-table-column label="实际到账" align="center">
            <template v-slot="scope">
              {{ scope.row.incomeWithdrawArrive|| '--' }}
            </template>
          </el-table-column>
          <el-table-column prop="createTime" label="创建时间" align="center">
            <template v-slot="scope">
              {{ getDateTime(scope.row.createTime)[6] || '--' }}
            </template>
          </el-table-column>
        </el-table>
        <div class="my-table-footer">
          <el-pagination style="margin-left:auto;" v-model:currentPage="page" v-model:page-size="size"
            :page-sizes="[10, 20, 50, 100]" small :background="true" layout="total, sizes, prev, pager, next, jumper"
            :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { nextTick, onMounted, reactive, ref, toRefs } from 'vue'
import hexMD5 from "@/utils/md5.min.js"
import api from './api.js'
import { warningDeal, getDateTime, getWindowWidthAndHeight } from '@/utils/utils'
export default {
  setup(props, context) {
    const dialogFormRef = ref(null)

    const state = reactive({
      dialogTitle: '',
      dialogFormVisible: false,

      searchForm: {
        "createTimeEnd": "",
        "createTimeStart": "",
        "shopId": "",
        "userName": "",
        "userType": ""
      },

      tableHeight: 0,
      tableData: [],
      page: 1,
      size: 10,
      total: 0,

      userType: {
        '0': '平台超管', //0-平台超管，1-平台管理员，10-总代超管，11-总代用户，20-门店店长，21-门店用户，30-车主角色
        '1': '平台管理员',
        '10': '总代超管',
        '11': '总代用户',
        '20': '门店店长',
        '21': '门店用户',
        '30': '车主角色',
      },
    })

    onMounted(() => {
      let winHeight = getWindowWidthAndHeight()
      state.tableHeight = winHeight.windowHeight - 270
    })

    function dialogShow(params) {
      state.searchForm.shopId = params.shopId
      state.dialogTitle = `${params.shopName}的用户`
      state.dialogFormVisible = true
      getTableData()
    }

    function getTableData() {
      const obj = {
        page: state.page,
        size: state.size,
        ...state.searchForm,
        startTime: state.searchForm.date && state.searchForm.date[0],
        endTime: state.searchForm.date && state.searchForm.date[1],
        orderBy: 'id desc',
      }
      api.incomeUserList(obj).then(res => {
        if (res.code == '200') {
          state.tableData = res.data.records
          state.total = res.data.total
        } else {
          warningDeal(res.msg)
        }
      }).catch(err => {
        console.log(err)
      })
    }

    function handleCurrentChange(e) {
      state.page = e
      getTableData()
    }

    function handleSizeChange(e) {
      state.size = e
      getTableData()
    }

    return {
      ...toRefs(state),
      dialogFormRef,
      getDateTime,
      dialogShow,
      handleCurrentChange,
      handleSizeChange,
    }
  }
}
</script>

<style lang="scss" scoped>
.my-table-box {
  .table-handle-box {
    display: flex;
    align-items: center;
    gap: 0 20px;
  }

  .my-table-footer {
    display: flex;
    align-items: center;
    margin-top: 10px;
    flex-wrap: wrap;
    gap: 10px;
  }
}
</style>